<template>
  <div>
    <el-row>
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="开始时间" prop="date">
          <el-date-picker
            v-model="queryParams.startDate"
            type="date"
            placeholder="开始时间"
            size="default"
            @change="handleQuery"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="date">
          <el-date-picker
            v-model="queryParams.endDate"
            type="date"
            placeholder="结束时间"
            size="default"
            @change="handleQuery"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="lineChart">
      <LineChart
        :chartData="mapeData"
        :YchartData="YmapeData"
        :title="mapetitle"
      />
    </div>
    <div class="lineChart">
      <LineChart
        :chartData="rsmeData"
        :YchartData="YrsmeData"
        :title="rsmetitle"
      />
    </div>
  </div>
</template>

<script lang="js" setup>
import {ref,defineProps,watch,watchEffect} from 'vue'
import moment from "moment"
import LineChart from '@/components/lineChart.vue'
import { getShanxiMonitorMape,getShanxiMonitorRmse,getMengxiMonitorMape,getMengxiMonitorRmse } from "@/api/competitoe.js"
import { useRoute, useRouter } from "vue-router";
    import { ElLoading } from 'element-plus'

const route = useRoute();

const props =  defineProps(['address'])
// 初始化时间
const startDate = moment().subtract(90, "days").format("YYYY-MM-DD")
const endDate = moment().format("YYYY-MM-DD")
const queryParams =ref({
  startDate: startDate,
  endDate: endDate
})
const mapeData = ref();
const rsmeData = ref();
const YmapeData = ref();
const YrsmeData = ref();
const mapetitle = ref(route.query.address == 1 ? '山西日前MAPE指标' : '蒙西全网统一MAPE指标');
const rsmetitle = ref(route.query.address == 1 ? '山西日前RSME指标' : '蒙西全网统一RSME指标');

// 监听路由参数变化
watch(route, () => {
  console.log('路由发生变化，重新请求接口', route.query);
  // 在这里调用重新请求接口的方法
    mapeData.value = []
    YmapeData.value=[]
    rsmeData.value = []
    YrsmeData.value=[]
    //显示加载状态
    // ElLoading.service()
  getData();
});

//获取表格数据
const getData = () => {
  mapetitle.value = route.query.address === '1' ? '山西日前MAPE指标' : '蒙西全网统一MAPE指标';
  rsmetitle.value = route.query.address === '1'? '山西日前RSME指标' : '蒙西全网统一RSME指标';
  const getMapeData = route.query.address === '1' ? getShanxiMonitorMape : getMengxiMonitorMape;
  const getRsmeData = route.query.address=== '1' ? getShanxiMonitorRmse : getMengxiMonitorRmse;

  getMapeData(queryParams.value).then(res => {
    mapeData.value = res.data;
    YmapeData.value = ConvertDataFormat(res.data);
  });

  getRsmeData(queryParams.value).then(res => {
    rsmeData.value = res.data;
    YrsmeData.value = ConvertDataFormat(res.data);
  });
};

// 转换数据格式
const ConvertDataFormat=(data)=>{
   const newDataArray = data.model_list.map(modelName => ({
       name: modelName,
       data: data[modelName],
       type: 'line',
      // stack: 'Total',
      markLine: {
        data: [
          { type: 'average', name: 'Avg' }
        ]
      }
    }));
    return newDataArray
}
/** 搜索操作 */
function handleQuery() {

    getData();
}




// watchEffect(() => {
//   console.log('当前路由参数：', route.query)
// })


getData()
</script>

<style scoped lang="scss">
.lineChart {
  width: 100%;
  height: 400px;
  margin: 20px 0 60px;
}
</style>
